import React, { Component } from 'react'

 class Shoukong extends Component {
  state = {
      val:"",
      val1:true,
      name:"张三"
  }
  checkval(event){
        // console.log(event)
        // console.log(event.target.value)
        // this.setState({
        //     val:event.target.value
        // },()=>{ // render完以后执行得,不推荐在这个回调函数里在setSate
        //       console.log(this.state.val)
        //     //  this.setState({
        //     //      val:"2222"
        //     //  })

        // })
        // setTimeout((e)=>{
        //     console.log(this)
        //     this.setState({
        //         val:event.target.value
        //     })
        //     console.log(this.state.val)
        // },0)
       
  }
  checkval1(e){
      console.log(e)
      this.setState({
          val1:e.target.checked
      })
  }
  fn(){
    // this.setState可能是同步，也有可能是异步，当在延时器中是异步
    setTimeout(()=>{
        this.setState({
            name:";lisi"
        })
        console.log(this.state.name)
    },0)
  
  }
  render() {
     let {val,val1,name} = this.state
    return (
      <div>
          {/* 在react里没有任何指令 只能通过受控组件和非受控组件获取*/}
          {/* input框就受state中val的控制 */}
          <input type="text" value={val} onChange={this.checkval.bind(this)}/>
          <input type="checkbox" checked={val1} onChange={this.checkval1.bind(this)}/>
          <button onClick={this.fn.bind(this)}>点击</button>
          <span>{name}</span>
      </div>
    )
  }
}

export default Shoukong